<template>
  <Card>
    <div slot="title">
      <span style="line-height:32px; height:32px;">字典类型</span>
      <Button @click="onCreateType" style="float:right">新增</Button>
    </div>
    <tables
      ref="tables"
      editable
      search-place="top"
      v-model="tableData"
      :columns="columns"
      :loading="loading"
      :plusSearch="plusSearch"
      :hasOperation="hasOperation"
      @on-search="getDataOnSearch"
      @on-refresh="getData"
      @on-save-edit="onSaveEdit"
      @on-row-click="onRowClick"
      />
    <div style="margin-top:10px;">
      <Page
      :total="page.total"
      :current='page.current'
      :page-size='page.pageSize'
      :page-size-opts='page_size_opts'
      @on-page-size-change="getDataByChangeSize"
      @on-change="getData"
      show-sizer />
    </div>
    <!-- 新增或者编辑 -->
    <Modal
        v-model="showTypeModal"
        :title="typeModalTitle"
        @on-ok="saveType">
      <Form :model="dictTypeFormData">
        <Row :gutter="32">
          <Col span="8">
                <FormItem label="名称" label-position="top">
                    <Input v-model="dictTypeFormData.configName" placeholder="请输入字典名称" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="键" label-position="top">
                    <Input v-model="dictTypeFormData.configKey" placeholder="请输入字典类型" />
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="值" label-position="top">
                    <Input v-model="dictTypeFormData.configValue" placeholder="请输入字典类型" />
                </FormItem>
            </Col>
        </Row>
      </Form>
    </Modal>
    <!-- 详情 -->
    <Modal
      v-model="showTypeDetailModal"
      title="数据详情"
      @on-cancel="onDetailCancel">
      <Row :gutter="32">
        <Col span="8">
            名称：{{ currentSelectedRow.configName }}
        </Col>
        <Col span="8">
            键：{{ currentSelectedRow.configKey }}
        </Col>
        <Col span="8">
            值：{{ currentSelectedRow.configValue }}
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
            创建时间：{{ currentSelectedRow.createdTime }}
        </Col>
        <Col span="12">
            更新时间：{{ currentSelectedRow.updatedTime }}
        </Col>
      </Row>
    </Modal>
  </Card>
</template>
<script>
import api from '@/api/base/param'
import Tables from '_c/tables'

export default {
  props: {

  },
  components: {
    Tables
  },
  data () {
    return {
      // 通用变量
      // 分页
      page_size_opts: [5, 10, 20, 30, 50],
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        totalPage: 0
      },
      loading: false,
      // 表单变量
      dictTypeFormData: {
        configName: '',
        configKey: '',
        configValue: ''
      },
      showTypeModal: false,
      typeModalTitle: '新增',
      showTypeDetailModal: false,
      currentSelectedRow: {
        configName: '',
        configKey: '',
        configValue: '',
        updatedTime: ''
      },
      // table变量
      hasOperation: false,
      plusSearch: false,
      searchValue: '',
      columns: [
        { title: '名称', key: 'configName', editable: true },
        { title: '参数键', key: 'configKey', editable: true },
        { title: '参数值', key: 'configValue', editable: true },
        {
          title: '操作',
          key: 'handle',
          width: '150',
          button: [ (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showRow(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeRow(params.index)
                  }
                }
              }, '删除')
            ])
          }]
        }
      ],
      tableData: []
    }
  },
  methods: {
    // 查询
    getDataOnSearch (searchObj) {
      console.log(searchObj)
      this.page.current = 1
      this.getData(searchObj)
    },
    onCreateType () {
      this.showTypeModal = true
    },
    onRowClick (row, index) {
      this.$emit('on-row-click', row, index)
    },
    saveType () {
      api.add(this.dictTypeFormData).then(res => {
        this.getData()
      }).catch(e => {
        console.log(e)
      })
    },
    async onSaveEdit (params) {
      this.loading = true
      const key = params.column.key
      // Object.assign(params.row, { key : params.value})
      this.$set(params.row, key, params.value)
      await api.update(params.row)
      this.loading = false
    },
    removeRow (index) {
      const row = this.tableData[index]
      const r = confirm('确认删除么')
      if (r) {
        api.remove(row.uuid).then(res => {
          this.getData()
        })
      }
    },
    showRow (index) {
      this.currentSelectedRow = this.tableData[index]
      console.log(this.currentSelectedRow)
      this.showTypeDetailModal = true
    },
    onDetailCancel () {
      this.showTypeDetailModal = false
    },
    resetcurrentSelectedRow () {
      this.currentSelectedRow = {
        dictName: '',
        dictType: '',
        createdTime: '',
        updatedTime: ''
      }
    },
    // 单行选中
    onSelect (selection, row) {
      console.log(this.selectedRows)
      this.selectedRows = selection
    },
    // 装配返回数据到页面实体中
    arrangeDataToTable (data) {
      this.tableData = data.content
      this.page.current = data.pageNum
      this.page.pageSize = data.pageSize
      this.page.total = data.totalNumber
      this.page.totalPage = data.totalPage
    },
    getData (searchObj) {
      this.loading = true
      api.list(this.page.current, this.page.pageSize, searchObj).then(res => {
        this.arrangeDataToTable(res.data.data)
        this.loading = false
      }).catch(e => {
        console.log(e)
        this.loading = false
      })
    },
    getDataByChangeSize (index) {
      this.page.pageSize = index
      this.getData()
    }
  },
  mounted () {
    api.list().then(res => {
      const data = res.data.data
      this.tableData = data.content
      this.page.current = data.pageNum
      this.page.pageSize = data.pageSize
      this.page.total = data.totalNumber
      this.page.totalPage = data.totalPage
    })
  }
}
</script>
